component.ratings

rating-table

Photo Full name Location Rating Bonus
Image Lorem Ipsum Dolor Romania view on map
5
Image John Doe United States view on map
4
Image Jane Doe Europe view on map
2
Image Hulky Bean On the Moon view on map
1
<table class="table table-white table-vertical-center margin-none table-striped footable">
	<thead>
		<tr>
			<th data-class="expand" class="center">Photo</th>
			<th data-hide="phone" class="center">Full name</th>
			<th data-hide="phone" class="center">Location</th>
			<th data-hide="phone,tablet" class="center">Rating</th>
			<th data-hide="phone" class="center">Bonus</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td class="center"><img data-src="holder.js/50x50/dark" alt="Image" /></td>
			<td class="strong center">Lorem Ipsum Dolor</td>
			<td class="center">Romania <a href="" class="innerL text-underline">view on map <i class="fa fa-map-marker"></i></a></td>
			<td class="center">
				<div class="rating text-medium text-faded read-only">
		        	<span class="star active"></span>
		        	<span class="star"></span>
		        	<span class="star"></span>
		        	<span class="star"></span>
		        	<span class="star"></span>
		        </div>
			</td>
			<td class="center"><span class="strong text-medium">5 <i class="fa fa-gift"></i></span></td>
		</tr>
		<tr>
			<td class="center"><img data-src="holder.js/50x50/dark" alt="Image" /></td>
			<td class="strong center">John Doe</td>
			<td class="center">United States <a href="" class="innerL text-underline">view on map <i class="fa fa-map-marker"></i></a></td>
			<td class="center">
				<div class="rating text-medium read-only">
		        	<span class="star"></span>
		        	<span class="star"></span>
		        	<span class="star active"></span>
		        	<span class="star"></span>
		        	<span class="star"></span>
		        </div>
			</td>
			<td class="center"><span class="strong text-medium">4 <i class="fa fa-gift"></i></span></td>
		</tr>
		<tr>
			<td class="center"><img data-src="holder.js/50x50/dark" alt="Image" /></td>
			<td class="strong center">Jane Doe</td>
			<td class="center">Europe <a href="" class="innerL text-underline">view on map <i class="fa fa-map-marker"></i></a></td>
			<td class="center">
				<div class="rating text-medium text-faded read-only">
		        	<span class="star"></span>
		        	<span class="star"></span>
		        	<span class="star"></span>
		        	<span class="star"></span>
		        	<span class="star"></span>
		        </div>
			</td>
			<td class="center"><span class="strong text-medium text-faded">2 <i class="fa fa-gift"></i></span></td>
		</tr>
		<tr>
			<td class="center"><img data-src="holder.js/50x50/dark" alt="Image" /></td>
			<td class="strong center">Hulky Bean</td>
			<td class="center">On the Moon <a href="" class="innerL text-underline">view on map <i class="fa fa-map-marker"></i></a></td>
			<td class="center">
				<div class="rating text-medium text-faded read-only">
		        	<span class="star"></span>
		        	<span class="star"></span>
		        	<span class="star"></span>
		        	<span class="star"></span>
		        	<span class="star"></span>
		        </div>
			</td>
			<td class="center"><span class="strong text-medium text-faded">1 <i class="fa fa-gift"></i></span></td>
		</tr>
	</tbody>
</table>



Code

@import "http://localhost/shared/components/modules/admin/ratings/assets/less/rating.less";
@import "assets/components/modules/admin/tables/classic/assets/less/tables.less";
@import "http://localhost/shared/components/modules/admin/tables/responsive/assets/lib/css/footable.core.min.css";
@import "http://localhost/shared/components/modules/admin/tables/responsive/assets/custom/less/tables-responsive.less";

Usage

  1. Create a new LESS file (eg. styles.less)
  2. Copy & paste the above imports in the LESS file.
  3. Place the file in your project's document root.
  4. Load the LESS file into the <head> section of your HTML document, before any JavaScript files:

    <link type="stylesheet/less" href="styles.less" />

    NOTE  All the styles from the CORE package also need to be imported in this file, before the component imports.

  5. If you'd like to include other components on the same page, don't create multiple LESS files, but add all the imports in one file. You can create a LESS file for each page with just the resources used for that specific page, or you could create and use a single LESS file for the entire project.
  6. In production, compile the LESS file and use the resulting minified CSS file in the HTML document.

Scripts

BODY You should include the following scripts at the end of the HTML document, right before the closing </body> tag.

<script src="assets/components/modules/admin/tables/responsive/assets/lib/js/footable.min.js?v=v1.2.3"></script>
<script src="assets/components/modules/admin/tables/responsive/assets/custom/js/tables-responsive-footable.init.js?v=v1.2.3"></script>
<script src="assets/components/plugins/holder/holder.js?v=v1.2.3"></script>

rating-widget-1

Guest
4
Host
1
<div class="widget widget-heading-simple widget-body-white">
	<div class="widget-body padding-none">
		<div class="row row-merge">
			<div class="col-md-6">
				<h5 class="innerAll margin-none bg-gray border-bottom text-center strong muted text-uppercase"><i class="fa fa-fw fa-coffee text-faded"></i> Guest</h5>
				<div class="innerAll center inner-2x">
					<span class="text-xxlarge strong text-primary">4</span>
				</div>
			</div>
			<div class="col-md-6">
				<h5 class="innerAll margin-none bg-gray border-bottom text-center strong muted text-uppercase"><i class="fa fa-fw fa-beer text-faded"></i> Host</h5>
				<div class="innerAll center inner-2x muted">
					<span class="text-xxlarge strong">1</span>
				</div>
			</div>
		</div>
	</div>
</div>


Code

@import "http://localhost/shared/components/modules/admin/ratings/assets/less/rating.less";
@import "assets/components/core/less/widgets.less";

Usage

  1. Create a new LESS file (eg. styles.less)
  2. Copy & paste the above imports in the LESS file.
  3. Place the file in your project's document root.
  4. Load the LESS file into the <head> section of your HTML document, before any JavaScript files:

    <link type="stylesheet/less" href="styles.less" />

    NOTE  All the styles from the CORE package also need to be imported in this file, before the component imports.

  5. If you'd like to include other components on the same page, don't create multiple LESS files, but add all the imports in one file. You can create a LESS file for each page with just the resources used for that specific page, or you could create and use a single LESS file for the entire project.
  6. In production, compile the LESS file and use the resulting minified CSS file in the HTML document.

rating-widget-2

Icon ratings

Total rating: 3.4

<div class="widget widget-body-white">
	<div class="widget-head"><h4 class="heading text-uppercase">Icon ratings</h4></div>
	<div class="widget-body center innerAll inner-2x" data-height="111px">
		<span class="text-medium text-primary"><i class="fa fa-trophy"></i></span>
		<span class="text-medium text-primary"><i class="fa fa-trophy"></i></span>
		<span class="text-medium text-primary"><i class="fa fa-trophy"></i></span>
		<span class="text-medium text-faded"><i class="fa fa-trophy"></i></span>
		<span class="text-medium text-faded"><i class="fa fa-trophy"></i></span>
		<div class="separator bottom"></div>
		<p class="lead">Total rating: <strong>3.4</strong></p>
	</div>
</div>


Code

@import "http://localhost/shared/components/modules/admin/ratings/assets/less/rating.less";
@import "assets/components/core/less/widgets.less";

Usage

  1. Create a new LESS file (eg. styles.less)
  2. Copy & paste the above imports in the LESS file.
  3. Place the file in your project's document root.
  4. Load the LESS file into the <head> section of your HTML document, before any JavaScript files:

    <link type="stylesheet/less" href="styles.less" />

    NOTE  All the styles from the CORE package also need to be imported in this file, before the component imports.

  5. If you'd like to include other components on the same page, don't create multiple LESS files, but add all the imports in one file. You can create a LESS file for each page with just the resources used for that specific page, or you could create and use a single LESS file for the entire project.
  6. In production, compile the LESS file and use the resulting minified CSS file in the HTML document.

rating-widget-3

Users

4 mosaicpro
2 themeyard
1 gonzales
<div class="widget widget-body-white">
	<div class="widget-head"><h4 class="heading text-uppercase">Users</h4></div>
	<div class="widget-body padding-none">
		<table class="table table-striped table-vertical-center margin-none">
			<tbody>
				<tr>
					<td class="text-faded center strong border-none">4</td>
					<td class="text-primary border-none">mosaicpro</td>
					<td class="text-right">
						<a href=""><i class="fa fa-thumbs-up"></i></a>
						<a href=""><i class="fa fa-thumbs-down"></i></a>
					</td>
				</tr>
				<!-- <tr>
					<td class="text-faded center strong">3</td>
					<td class="text-primary">some dude</td>
					<td class="text-right">
						<a href=""><i class="fa fa-thumbs-up"></i></a>
						<a href=""><i class="fa fa-thumbs-down"></i></a>
					</td>
				</tr> -->
				<tr>
					<td class="text-faded center strong">2</td>
					<td class="text-primary">themeyard</td>
					<td class="text-right">
						<a href=""><i class="fa fa-thumbs-up"></i></a>
						<a href=""><i class="fa fa-thumbs-down"></i></a>
					</td>
				</tr>
				<tr>
					<td class="text-faded center strong">1</td>
					<td class="text-primary">gonzales</td>
					<td class="text-right">
						<a href=""><i class="fa fa-thumbs-up"></i></a>
						<a href=""><i class="fa fa-thumbs-down"></i></a>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>


Code

@import "http://localhost/shared/components/modules/admin/ratings/assets/less/rating.less";
@import "assets/components/core/less/widgets.less";

Usage

  1. Create a new LESS file (eg. styles.less)
  2. Copy & paste the above imports in the LESS file.
  3. Place the file in your project's document root.
  4. Load the LESS file into the <head> section of your HTML document, before any JavaScript files:

    <link type="stylesheet/less" href="styles.less" />

    NOTE  All the styles from the CORE package also need to be imported in this file, before the component imports.

  5. If you'd like to include other components on the same page, don't create multiple LESS files, but add all the imports in one file. You can create a LESS file for each page with just the resources used for that specific page, or you could create and use a single LESS file for the entire project.
  6. In production, compile the LESS file and use the resulting minified CSS file in the HTML document.

rating-widget-4-a

<div class="rating text-faded">
        <span class="star"></span>
        <span class="star"></span>
        <span class="star"></span>
        <span class="star active"></span>
        <span class="star"></span>
</div>  


Code

@import "http://localhost/shared/components/modules/admin/ratings/assets/less/rating.less";
@import "assets/components/core/less/widgets.less";

Usage

  1. Create a new LESS file (eg. styles.less)
  2. Copy & paste the above imports in the LESS file.
  3. Place the file in your project's document root.
  4. Load the LESS file into the <head> section of your HTML document, before any JavaScript files:

    <link type="stylesheet/less" href="styles.less" />

    NOTE  All the styles from the CORE package also need to be imported in this file, before the component imports.

  5. If you'd like to include other components on the same page, don't create multiple LESS files, but add all the imports in one file. You can create a LESS file for each page with just the resources used for that specific page, or you could create and use a single LESS file for the entire project.
  6. In production, compile the LESS file and use the resulting minified CSS file in the HTML document.

rating-widget-4

CSS Star rating

Current rating: 2/5

<div class="widget">
    <div class="widget-head">
        <h4 class="heading">CSS Star rating</h4>
    </div>
	<div class="widget-body center innerAll inner-2x" data-height="111px">
		<div class="rating text-medium text-faded margin-top-none">
        	<span class="star"></span>
        	<span class="star"></span>
        	<span class="star"></span>
        	<span class="star active"></span>
        	<span class="star"></span>
        </div>
        <div class="separator bottom"></div>
		<p class="lead">Current rating: <strong>2/5</strong></p>
	</div>
</div>


Code

@import "http://localhost/shared/components/modules/admin/ratings/assets/less/rating.less";
@import "assets/components/core/less/widgets.less";

Usage

  1. Create a new LESS file (eg. styles.less)
  2. Copy & paste the above imports in the LESS file.
  3. Place the file in your project's document root.
  4. Load the LESS file into the <head> section of your HTML document, before any JavaScript files:

    <link type="stylesheet/less" href="styles.less" />

    NOTE  All the styles from the CORE package also need to be imported in this file, before the component imports.

  5. If you'd like to include other components on the same page, don't create multiple LESS files, but add all the imports in one file. You can create a LESS file for each page with just the resources used for that specific page, or you could create and use a single LESS file for the entire project.
  6. In production, compile the LESS file and use the resulting minified CSS file in the HTML document.